import * as React from "react";
import classNames from "classnames/bind";
import * as styles from "./frame-resize-bar.css";
import { dispatch as appDispatch } from "../../core/app-state";

const cx = classNames.bind(styles);

export function FrameResizeBar () {
  const refCb = React.useCallback((node: HTMLDivElement) => {
    if (node) {
      let gotPointer = false;
      node.ongotpointercapture = (e) => {
        gotPointer = true;
      };
      node.onlostpointercapture = (e) => {
        gotPointer = false;
      };
      node.onpointerdown = (e) => {
        node.setPointerCapture(e.pointerId);
        appDispatch({
          type: 'frame.left.beginResize',
        });
      };
      node.onpointercancel = (e) => {
        node.releasePointerCapture(e.pointerId);
        appDispatch({
          type: 'frame.left.endResize',
        });
      };
      node.onpointermove = (e) => {
        if (gotPointer) {
          appDispatch({
            type: 'frame.left.resize',
            data: e.movementX/2,
          });
        }
      };
    }
  }, []);

  return (
    <div className={cx('frame-resize-bar')} ref={refCb}></div>
  );
}